<template>
  <div class="home-page">
    <!-- 头部 -->
    <div class="home-header">
      <div class="con">
        <h1>心理咨询预约平台</h1>
        <div class="search"><gh-icon name="home-search" /><input type="text" placeholder="搜一搜：心理疾病/医生/健康知识"></div>
      </div>
    </div>
    <!-- 系统公告 -->
    <div class="notice" >
      <van-notice-bar 
          @click="openNotice"
          left-icon="volume-o"
           :text="content"
           scrollable
       />
    </div>
    <!-- 导航 -->
    <div class="home-navs">
      <van-row>
        <van-col span="8">
          <router-link to="/consult/fast" class="nav">
            <gh-icon name="home-ceping" class="ceping"></gh-icon>
            <p class="title">心理测评</p>
            <p class="desc">查看您的心理状况</p>
          </router-link>
        </van-col>
        <van-col span="8">
          <router-link to="/booking" class="nav">
            <gh-icon name="home-graphic" class="jisu"></gh-icon>
            <p class="title">极速预约</p>
            <p class="desc">20s快速预约通道</p>
          </router-link>
        </van-col>
        <van-col span="8">
          <router-link to="/other/nearBy" class="nav">
            <gh-icon name="home-station" class="fujin"></gh-icon>
            <p class="title">附近心灵驿站</p>
            <p class="desc">线下咨询更了解</p>
          </router-link>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="6">
          <router-link to="/other/notice" class="nav min">
            <gh-icon name="home-order"></gh-icon>
            <p class="title">系统公告</p>
          </router-link>
        </van-col>
        <van-col span="6">
          <router-link to="/consult/list" class="nav min">
            <gh-icon name="home-docs"></gh-icon>
            <p class="title">聊天通道</p>
          </router-link>
        </van-col>
        <van-col span="6">
          <router-link to="/other/heartPaper" class="nav min">
            <gh-icon name="home-rp"></gh-icon>
            <p class="title">心灵纸条</p>
          </router-link>
        </van-col>
        <van-col span="6">
          <router-link to="/other/illnessInquiry" class="nav min">
            <gh-icon name="home-book"></gh-icon>
            <p class="title">心理疾病百科</p>
          </router-link>
        </van-col>
      </van-row>
    </div>
    <!-- 轮播图 -->
    <div class="home-banner">
      <van-swipe indicator-color="#fff" :autoplay="3000">
        <van-swipe-item>
          <router-link to="" class="content">
            <!-- <img src="" alt=""> -->
          <img src="@/assets/ad.png" alt="" />
          </router-link>
        </van-swipe-item>
        <van-swipe-item @click="toVideo">
          <router-link to="" class="content">
          <!-- <img src="" alt=""> -->
          <img src="https://img2.baidu.com/it/u=1646207434,1558029914&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="" />
        </router-link>
        </van-swipe-item>
        <van-swipe-item @click="toTestHearth">
          <router-link to="" class="content">
          <!-- <img src="" alt=""> -->
          <img src="https://resxz.eqh5.com/qngroup001/u4424802/1/0/3c827bdd35144315be458d1b58ba25ed.jpg" alt="心理测评" />
        </router-link>
        </van-swipe-item>

        
      </van-swipe>
    </div>
    <!-- 推荐咨询师 -->
    <div class="home-advice" >
      <div class="hot-counselor" @click="more">
        <div class="left">推荐咨询师</div>
        <div class="right">更多»</div>
      </div>
 <!--横向拖动 Begin-->
       <div class="counselor-scroll">
        <van-swipe :loop="false" :width="90" :show-indicators="false" >
          <van-swipe-item  v-for="item in items" :key="item.id"  @click="intoDetailConsultant(item.id)" > 
             <div class="item">
              <div class="img-item">
                <img :src="item.avatar" alt="">
              </div>
              <div class="other-item">
                  <p>{{item.name}}</p>
                  <p>{{item.coun_label}}星心理咨询师</p>
              </div> 
             </div>
          </van-swipe-item>
     
        </van-swipe>
       </div>
    </div>
   
  </div>
</template>
<script setup>
import {ref,onMounted,onBeforeMount} from "vue"
import {getConsultantsByOrgid} from '@/services/booking'
import {getNotceFirst } from '@/services/others'
import{useRouter}from 'vue-router'
const router =useRouter(); 

const active = ref('recommend')
//推荐咨询师信息响应式变量
const items=ref([])
const openNotice=()=>{
  console.log('打开系统公告')
}

const content =ref('')
//获取置顶公告
onMounted(async()=>{
  const res =await getNotceFirst();
  // console.log(res.data.content)
  const rec_Data=await getConsultantsByOrgid(1)
  items.value=rec_Data.data
  // console.log(items.value)
  content.value=res.data.content
})

//轮播图点击效果
const toVideo=()=>{
  window.open('https://www.bilibili.com/video/BV1Mg4y1979v?t=3.5',"_blank")
}
const toTestHearth=()=>{
  window.open("http://psy.yunxinli.cn/gdou/Home/Login?request=/gdou/Manage", "_blank");
  // console.log('心理测评')
}
//点击进入咨询师详情
const intoDetailConsultant=(id)=>{
  router.push(`/detailConsultant/${id}`)
}

//更多咨询师
const more=()=>{
  router.push('/bookingCounselor/1')
}
</script>

<style lang="scss" scoped>

.home-page {
  padding-bottom: 50px;
  background-color: #f8f8f8;
}
.home-header {
  height: 100px;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(180deg, rgba(62, 206, 197, 0.85), #26bcc6);
    border-bottom-left-radius: 150px 20px;
    border-bottom-right-radius: 150px 20px;
  }
  .con {
    position: relative;
    padding: 0 15px;
    > h1 {
      font-size: 18px;
      color: #fff;
      font-weight: normal;
      padding: 20px 0;
      line-height: 1;
      padding-left: 5px;
    }
    .search {
      height: 40px;
      border-radius: 20px;
      box-shadow: 0px 15px 22px -7px rgba(224, 236, 250, 0.8);
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: 0 20px;
      color: var(--gh-dark);
      font-size: 13px;
      .gh-icon {
        font-size: 16px;
        margin-right: 5px;
      }
      input{
        border: none;
        width: 100%;
        font-family: '宋体';
        font-size: 14px;
        color: var(--gh-text1)
      }
    }
  }
}
.home-navs {
  padding: 10px 15px 0 15px;
  background-color: #fff;
  .nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    .gh-icon {
      font-size: 48px;
    }
    .ceping{
      font-size: 36px;
      margin-top: 10px;
    }
    .jisu{
      font-size: 44px;
      margin-top: 3px;
    }
    .fujin{
      font-size: 44px;
      margin-top: 3px;
    }
    .title {
      font-weight: 500;
      margin-top: 5px;
      color: var(--gh-text1);
    }
    .desc {
      font-size: 11px;
      color: var(--gh-tag);
      margin-top: 2px;
    }
    &.min {
      .gh-icon {
        font-size: 31px;
      }
      .title {
        font-size: 13px;
        color: var(--gh-text2);
        font-weight: normal;
      }
    }
  }
}
.home-banner {
  box-sizing: border-box;
  height: 100px;
  /* padding: 10px 15px; */
  background: #d5d5d5;
  .van-swipe{
    height: 100%;
    background: #fff;
    .content{
    position: relative;
    display: block;
    height: 100%;
    /* overflow: hidden; */
    /* width: 100%; */
      img {
         display: block;
         max-height: 100%;
         width: 100%;
         border-radius: 20px;
         /* object-fit: cover; */
       }
     }

  }
 
}
.home-advice{
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  padding: 15px 10px;
  .hot-counselor{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
      font-size: 14px;
      font-weight: bold;
      font-family: '黑体';
    }
    .right{
      font-size: 10px;
      font-family: '黑体';
      color: var(--gh-disable);
    }
  }
  .counselor-scroll{
    margin-top: 10px;
    height: 140px;
    background-color: #fff;
    .item{
      height: 140px;
      width: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* background-color: #26bcc6; */
      .img-item{
        height: 100px;
        width: 80px;
        img{
          display: block;
          height: 100%;
          width: 100%;
          border-radius: 10px;
	        border-bottom-left-radius: 20px;
	        border-top-right-radius: 20px;
	        border: 2px solid var(--projectColorLight);
        }
      }
      .other-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-family: '黑体';
        margin-top: 4px;
        color:#666;
        font-size: 10px;
       
      }
    }
  }
}
</style>
